<script>
import request from "../../../utils/request"
import imageUpload from "../../../components/imageUpload/index"
import { showModal, showToast } from "../../../utils"

export default {
	name: "index",
	components: { imageUpload },
	data() {
		return {
			feedbackTypeList: [],
			inputForm: {
				feedbackTypeCode: "",
				feedbackContent: "",
				feedbackPicture: "",
			},
		}
	},
	onLoad() {
		//获取反馈类型列表
		request({
			url: "feedback/listFeedbackType",
			errorHandle: true,
			showLoading: true,
		}).then(data => {
			this.feedbackTypeList = data
		})
	},
	methods: {
		submit() {
			//表单输入检查
			if (!this.inputForm.feedbackTypeCode) {
				showToast.default("请选择反馈类型")
				return
			}
			if (!this.inputForm.feedbackContent) {
				showToast.default("请输入反馈内容")
				return
			}
			request({
				url: "feedback/add",
				data: this.inputForm,
				errorHandle: true,
				showLoading: true,
			}).then(data => {
				showModal({
					content: "反馈成功",
					showCancel: false,
				}).then(() => {
					uni.navigateBack()
				})
			})
		},
	},
}
</script>

<template>
	<view class="page">
		<view class="block">
			<view class="title">反馈类型</view>
			<view class="feedback-type-list value">
				<view
					class="feedback-type-item"
					v-for="item in feedbackTypeList"
					:key="item.feedbackTypeCode"
					:class="[inputForm.feedbackTypeCode === item.feedbackTypeCode ? 'active' : '']"
					@click="inputForm.feedbackTypeCode = item.feedbackTypeCode"
				>
					{{ item.feedbackTypeName }}
				</view>
			</view>
		</view>
		<view class="block">
			<view class="title">反馈内容</view>
			<view class="value">
				<view class="textarea-container">
					<textarea
						class="textarea"
						placeholder="请输入反馈内容"
						v-model="inputForm.feedbackContent"
						:maxlength="-1"
						:auto-height="true"
					></textarea>
				</view>
				<view class="upload-image">
					<imageUpload 
						v-model="inputForm.feedbackPicture"
						:upload-params="{
							dir:'feedback'
						}"
					></imageUpload>
				</view>
			</view>
		</view>
		<view class="block">
			<view class="submit-btn" @click="submit">提交</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
.page {
	padding: 50rpx 30rpx;
	
	> .block {
		&:not(:first-child) {
			margin-top: 100rpx;
		}
		
		> .title {
			font-size: 34rpx;
			font-weight: 500;
			color: #333333;
		}
		
		> .value {
			margin-top: 36rpx;
			
			&.feedback-type-list {
				display: flex;
				flex-wrap: wrap;
				
				.feedback-type-item {
					width: calc((100% - 60rpx) / 4);
					margin-bottom: 20rpx;
					height: 70rpx;
					border: 2rpx solid #999999;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					
					//排除4的整数倍的元素（最右边的元素）
					&:not(:nth-child(4n)) {
						margin-right: 20rpx;
					}
					
					&.active {
						background: var(--theme-color);
						color: white;
					}
				}
			}
			
			> .textarea-container {
				background: #F2F2F2;
				border-radius: 12rpx;
				padding: 22rpx 32rpx;
				
				> .textarea {
					width: 100%;
					min-height: 200rpx;
				}
			}
			
			> .upload-image {
				margin-top: 36rpx;
			}
		}
		
		> .submit-btn {
			width: 50%;
			margin: 0 auto;
			height: 100rpx;
			background: var(--theme-color);
			color: white;
			border-radius: 50rpx;
			line-height: 100rpx;
			text-align: center;
		}
	}
}
</style>